<template>
  <div class="classEvaluate">
    <el-form :model="queryParams" :inline="true">
      <el-form-item label="标题：">
        <el-input placeholder="请输入标题" v-model="queryParams.incidentName" />
      </el-form-item>
      <el-form-item label="班级：">
        <el-select v-model="queryParams.classId" placeholder="请选择" clearable size="small">
          <el-option v-for="item in classList" :key="item.id" :label="item.label" :value="item.id" size="small">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="记录者：">
        <el-input placeholder="请输入记录者" v-model="queryParams.createUserName" />
      </el-form-item>
      <el-form-item label="事件主角：">
        <el-input placeholder="请输入事件主角" v-model="queryParams.incidentProtagonist" />
      </el-form-item>
      <el-form-item label="评价时间：">
        <el-date-picker v-model="evaluateTime" type="daterange" value-format="yyyy-MM-dd" range-separator="至"
          start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"
          style="margin-left: 10px">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-button type="primary" icon="el-icon-download" size="mini" @click="handleExport('qc')">导出</el-button>
    <el-table v-loading="loading" :data="assetList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column type="index" width="55" align="center" label="序号" />
      <el-table-column label="标题" align="center" prop="incidentName">
        <template slot-scope="scope">
          <div>
            {{ scope.row.incidentName == '' ? '无标题记录' : scope.row.incidentName }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="班级" align="center" prop="className" />
      <el-table-column label="记录者" align="center" prop="createUserName" />
      <el-table-column label="事件主角" align="center" prop="studentNames"></el-table-column>
      <el-table-column label="事件时间" align="center" prop="incidentDate"></el-table-column>
      <el-table-column label="评价时间" align="center" prop="evaluateTime"></el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="220">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row)">查看</el-button>
          <el-button size="mini" type="text" icon="el-icon-download" @click="handleExport(scope.row.id)">导出</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

    <el-dialog title="课堂评价详情" :visible.sync="dialogVisible" width="50%" :close-on-click-modal="false"
      :close="handleClose">
      <div class="detail-content">
        <p class="detail-content-top-title">{{ topInfo.schoolName }}课堂评价</p>
        <p class="detail-content-top-name">
          <span>班级：{{ topInfo.className }}</span>
          <span>记录者：{{ topInfo.createUserName }}</span>
        </p>
        <!-- <div  class="detail-content-top-content">
          <p class="detail-content-top-p1">
           <span>事件时间</span>
            <span>{{ topInfo.incidentDate }}</span>
            <span>主角</span>
            <span>{{ topInfo.studentList }}</span>
          </p>
          <p>
            <span style="width:300px ;">事件名称</span>
            <span>{{ topInfo.incidentName }}</span>
          </p>
          <p>
            <span  style="width:300px ;">事件背景</span>
            <span>{{ topInfo.incidentBackdrop }}</span>
          </p>
          <div style="display: flex;" class="detail-content-top-p3">
            <span class="span1">内容</span>
            <div style="border: 1px solid #ccc;width: 690px;text-align: center;">
              <div>
                <img :src="item" alt="" v-for="(item,index) in  topInfo.imageList" :key="index">
              </div>
              <span>{{ topInfo.incidentContent }}</span>
            </div>
          </div>
          <div class="detail-content-top-p2">
            <span class="span1"   style="width:228px ;">一级领域评分</span>
            <p class="p1">
              <span v-for="(item,index) in middioInfo.firstLevel" :key="index">
              {{ item.secondLevelName }}{{ item.averageScore }}
              </span>
            </p>
          </div>
          <div class="detail-content-top-p4">
            <span  class="span1">二级领域评分</span>
            <p class="p1">
              <span v-for="(item,index) in middioInfo.secondLevel" :key="index">
              {{ item.secondLevelName }}{{ item.averageScore }}
            </span>
            </p>
          </div>
          <p>
            <span  style="width:300px ;">教师评语</span>
            <span>{{ topInfo.teacherEvaluate }}</span>
          </p>
        </div> -->
        <table class="MsoTableGrid" border="1" cellspacing="0" cellpadding="0" width="100%" style="
            border-collapse: collapse;
            mso-table-layout-alt: fixed;
            border: none;
            mso-border-alt: solid windowtext 0.5pt;
            mso-yfti-tbllook: 1184;
            mso-padding-alt: 0cm 5.4pt 0cm 5.4pt;
          ">
          <tr style="mso-yfti-irow: 0; mso-yfti-firstrow: yes; height: 18.5pt">
            <td width="113" style="
                width: 1cm;
                border: solid windowtext 1pt;
                mso-border-alt: solid windowtext 0.5pt;
                padding: 0cm 5.4pt 0cm 5.4pt;
                height: 18.5pt;
              ">
              <p class="MsoNormal" align="center" style="text-align: center; tab-stops: center 46.45pt">
                事件时间<span lang="EN-US">:</span>
              </p>
            </td>
            <td width="113" style="
                width: 1cm;
                border: solid windowtext 1pt;
                border-left: none;
                mso-border-left-alt: solid windowtext 0.5pt;
                mso-border-alt: solid windowtext 0.5pt;
                padding: 0cm 5.4pt 0cm 5.4pt;
                height: 18.5pt;
              ">
              <p class="MsoNormal" align="center" style="text-align: center; tab-stops: center 46.45pt">
                <span lang="EN-US">
                  {{ topInfo.incidentDate }}
                </span>
              </p>
            </td>
          </tr>
          <tr style="mso-yfti-irow: 1; mso-yfti-firstrow: yes; height: 18.5pt">
            <td width="113" style="
                width: 1cm;
                border: solid windowtext 1pt;
                mso-border-left-alt: solid windowtext 0.5pt;
                mso-border-alt: solid windowtext 0.5pt;
                padding: 0cm 5.4pt 0cm 5.4pt;
                height: 18.5pt;
              ">
              <p class="MsoNormal" align="center" style="text-align: center; tab-stops: center 46.45pt">
                事件主角<span lang="EN-US">:</span>
              </p>
            </td>
            <td width="113" style="
                width: 1cm;
                border: solid windowtext 1pt;
                border-left: none;
                mso-border-left-alt: solid windowtext 0.5pt;
                mso-border-alt: solid windowtext 0.5pt;
                padding: 0cm 5.4pt 0cm 5.4pt;
                height: 18.5pt;
              ">
              <p class="MsoNormal" align="center" style="text-align: center; tab-stops: center 46.45pt">
                <span lang="EN-US">
                  {{ topInfo.studentList }}<span lang="EN-US">:</span>
                </span>
              </p>
            </td>
          </tr>
          <tr style="mso-yfti-irow: 2; mso-yfti-firstrow: yes; height: 18.5pt">
            <td width="213" style="
                width: 1cm;
                border: solid windowtext 1pt;
                mso-border-alt: solid windowtext 0.5pt;
                padding: 0cm 5.4pt 0cm 5.4pt;
                height: 18.5pt;
              ">
              <p class="MsoNormal" align="center" style="text-align: center; tab-stops: center 46.45pt">
                事件名称<span lang="EN-US">:</span>
              </p>
            </td>
            <td width="113" style="
                width: 1cm;
                border: solid windowtext 1pt;
                border-left: none;
                mso-border-left-alt: solid windowtext 0.5pt;
                mso-border-alt: solid windowtext 0.5pt;
                padding: 0cm 5.4pt 0cm 5.4pt;
                height: 18.5pt;
              ">
              <p class="MsoNormal" align="center" style="text-align: center; tab-stops: center 46.45pt">
                <span lang="EN-US">
                  {{ topInfo.incidentName }}
                </span>
              </p>
            </td>
          </tr>
          <tr style="mso-yfti-irow: 3; mso-yfti-firstrow: yes; height: 18.5pt">
            <td width="113" style="
                width: 1cm;
                border: solid windowtext 1pt;
                mso-border-alt: solid windowtext 0.5pt;
                padding: 0cm 5.4pt 0cm 5.4pt;
                height: 18.5pt;
              ">
              <p class="MsoNormal" align="center" style="text-align: center; tab-stops: center 46.45pt">
                事件背景<span lang="EN-US">:</span>
              </p>
            </td>
            <td width="113" style="
                width: 1cm;
                border: solid windowtext 1pt;
                border-left: none;
                mso-border-left-alt: solid windowtext 0.5pt;
                mso-border-alt: solid windowtext 0.5pt;
                padding: 0cm 5.4pt 0cm 5.4pt;
                height: 18.5pt;
              ">
              <p class="MsoNormal" align="center" style="text-align: center; tab-stops: center 46.45pt">
                <span lang="EN-US">
                  {{ topInfo.incidentBackdrop }}
                </span>
              </p>
            </td>
          </tr>
          <tr style="mso-yfti-irow: 4; mso-yfti-firstrow: yes; height: 18.5pt">
            <td width="113" style="
                width: 1cm;
                border: solid windowtext 1pt;
                mso-border-alt: solid windowtext 0.5pt;
                padding: 0cm 5.4pt 0cm 5.4pt;
                height: 18.5pt;
              ">
              <p class="MsoNormal" align="center" style="text-align: center; tab-stops: center 46.45pt">
                内容<span lang="EN-US">:</span>
              </p>
            </td>
            <td width="113" style="
                width: 1cm;
                border: solid windowtext 1pt;
                border-left: none;
                mso-border-left-alt: solid windowtext 0.5pt;
                mso-border-alt: solid windowtext 0.5pt;
                padding: 0cm 5.4pt 0cm 5.4pt;
                height: 18.5pt;
              ">
              <p class="MsoNormal" align="center" style="text-align: center; tab-stops: center 46.45pt">
                <img :src="item" alt="" v-for="(item, index) in topInfo.imageList" :key="index"
                  style="width: 100px; height: 100px" />
                <br />
                <span>{{ topInfo.incidentContent }}</span>
              </p>
            </td>
          </tr>
          <tr style="mso-yfti-irow: 4; mso-yfti-firstrow: yes; height: 18.5pt">
            <td width="113" style="
                width: 1cm;
                border: solid windowtext 1pt;
                mso-border-alt: solid windowtext 0.5pt;
                padding: 0cm 5.4pt 0cm 5.4pt;
                height: 18.5pt;
              ">
              <p class="MsoNormal" align="center" style="text-align: center; tab-stops: center 46.45pt">
                一级领域评分<span lang="EN-US">:</span>
              </p>
            </td>
            <td width="113" style="
                width: 1cm;
                border: solid windowtext 1pt;
                border-left: none;
                mso-border-left-alt: solid windowtext 0.5pt;
                mso-border-alt: solid windowtext 0.5pt;
                padding: 0cm 5.4pt 0cm 5.4pt;
                height: 18.5pt;
              ">
              <p class="MsoNormal" align="center" style="text-align: center; tab-stops: center 46.45pt">
                <span v-for="(item, index) in middioInfo.firstLevel" :key="index">
                  {{ item.secondLevelName }}{{ item.averageScore }}
                </span>
              </p>
            </td>
          </tr>
          <tr style="mso-yfti-irow: 4; mso-yfti-firstrow: yes; height: 18.5pt">
            <td width="113" style="
                width: 1cm;
                border: solid windowtext 1pt;
                mso-border-alt: solid windowtext 0.5pt;
                padding: 0cm 5.4pt 0cm 5.4pt;
                height: 18.5pt;
              ">
              <p class="MsoNormal" align="center" style="text-align: center; tab-stops: center 46.45pt">
                二级领域评分<span lang="EN-US">:</span>
              </p>
            </td>
            <td width="113" style="
                width: 1cm;
                border: solid windowtext 1pt;
                border-left: none;
                mso-border-left-alt: solid windowtext 0.5pt;
                mso-border-alt: solid windowtext 0.5pt;
                padding: 0cm 5.4pt 0cm 5.4pt;
                height: 18.5pt;
              ">
              <p class="MsoNormal" align="center" style="text-align: center; tab-stops: center 46.45pt">
                <span v-for="(item, index) in middioInfo.secondLevel" :key="index">
                  {{ item.secondLevelName }}{{ item.averageScore }}
                </span>
              </p>
            </td>
          </tr>
        </table>
        <p style="font-weight: 600; font-size: 20px">附课堂观察评分单</p>
        <!-- <div class="detail-bottom">
          <p v-for="(item, index) in bottomInfo" :key="index">
            <span>{{ item.secondLevelName }}</span>
            <span>{{ item.questionTitle }}</span>
            <span>{{ item.questionMark }}</span>
            <span>{{ item.questionComment }}</span>
          </p>
        </div> -->
        <table class="MsoTableGrid" border="1" cellspacing="0" cellpadding="0" width="100%" style="
            border-collapse: collapse;
            mso-table-layout-alt: fixed;
            border: none;
            mso-border-alt: solid windowtext 0.5pt;
            mso-yfti-tbllook: 1184;
            mso-padding-alt: 0cm 5.4pt 0cm 5.4pt;
          ">
          <tr style="mso-yfti-irow: 0; mso-yfti-firstrow: yes; height: 18.5pt" v-for="item in bottomInfo" :key="item.id">
            <td v-if="item.secondLevelName"
              :rowspan="item.secondLevelName == '反馈质量' || item.secondLevelName == '语言示范' ? '5' : '4'" width="113" style="
                width: 1cm;
                border: solid windowtext 1pt;
                mso-border-left-alt: solid windowtext 0.5pt;
                mso-border-alt: solid windowtext 0.5pt;
                padding: 0cm 5.4pt 0cm 5.4pt;
                height: 18.5pt;
              ">

              <p align="center" style="text-align: center; tab-stops: center 46.45pt">
                {{ item.secondLevelName }}
              </p>
            </td>
            <td width="113" style="
                width: 1cm;
                border: solid windowtext 1pt;
                border-left: none;
                mso-border-left-alt: solid windowtext 0.5pt;
                mso-border-alt: solid windowtext 0.5pt;
                padding: 0cm 5.4pt 0cm 5.4pt;
                height: 18.5pt;
              ">
              <p class="MsoNormal" align="center" style="text-align: center; tab-stops: center 46.45pt">
                <span lang="EN-US">
                  {{ item.questionTitle }}
                </span>
              </p>
            </td>
            <td width="113" style="
                width: 1cm;
                border: solid windowtext 1pt;
                mso-border-alt: solid windowtext 0.5pt;
                padding: 0cm 5.4pt 0cm 5.4pt;
                height: 18.5pt;
              ">
              <p class="MsoNormal" align="center" style="text-align: center; tab-stops: center 46.45pt">
                {{ item.questionMark }}
              </p>
            </td>
            <td width="113" style="
                width: 1cm;
                border: solid windowtext 1pt;
                border-left: none;
                mso-border-left-alt: solid windowtext 0.5pt;
                mso-border-alt: solid windowtext 0.5pt;
                padding: 0cm 5.4pt 0cm 5.4pt;
                height: 18.5pt;
              ">
              <p class="MsoNormal" align="center" style="text-align: center; tab-stops: center 46.45pt">
                <span lang="EN-US">
                  {{ item.questionComment }}
                </span>
              </p>
            </td>
          </tr>

        </table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" icon="el-icon-download" size="mini" @click="handleExport(topInfo.id)">导出</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { selectClazz } from "@/api/base/clazz";
import {
  classRecordsList,
  classRecordsInfo,
  classEvaluateSelect,
  classQuestionExport,
} from "@/api/teach/assessment.js";
export default {
  name: "",
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      evaluateTime: "",
      classList: [],
      loading: false,
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      assetList: [],
      total: 0,
      dialogVisible: false,
      topInfo: {}, // 幼儿信息
      middioInfo: {}, // 领域评分
      bottomInfo: {}, // 评分明细
    };
  },
  components: {},
  computed: {},
  mounted() {
    this.getQueryClazzList();
    this.getList();
  },
  methods: {
    // 搜索
    handleQuery() {
      this.queryParams.startDate = this.evaluateTime[0];
      this.queryParams.endDate = this.evaluateTime[1];
      this.getList();
    },
    resetQuery() {
      this.evaluateTime = ''
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
      };
      this.getList();
    },
    // 查看详情
    async handleView(row) {
      const { data, code, msg } = await classRecordsInfo(row.id);
      if (code == 200) {
        this.topInfo = data.top;
        const arr = [];
        data.top.studentList.forEach((item) => {
          arr.push(item.name);
        });
        this.topInfo.studentList = arr.join(",");
        if (data.middio.firstLevel) {
          data.middio.firstLevel.forEach((item) => {
            if (item.averageScore) {
              const num = Number(item.averageScore);
              item.averageScore = num.toFixed(1);
            }
          });
        }
        if (data.middio.secondLevel) {
          data.middio.secondLevel.forEach((item) => {
            if (item.averageScore) {
              const num = Number(item.averageScore);
              item.averageScore = num.toFixed(1);
            }
          });
        }

        this.middioInfo = data.middio;
        const list = data.bottom;
        let newArr4 = []; // 关注幼儿观点
        let newArr3 = []; // 教师敏感性
        let newArr2 = []; // 消极氛围
        let newArr1 = []; // 积极氛围
        let newArr7 = []; // 教学活动形式
        let newArr6 = []; // 活动安排效率
        let newArr5 = []; // 行为管理
        let newArr10 = []; // 语言示范
        let newArr9 = []; // 反馈质量
        let newArr8 = []; // 认知发展

        list.forEach((item) => {
          if (item.secondType == 4) {
            // 关注幼儿观点
            newArr4.push(item);
          } else if (item.secondType == 3) {
            // 教师敏感性
            newArr3.push(item);
          } else if (item.secondType == 2) {
            // 消极氛围
            newArr2.push(item);
          } else if (item.secondType == 1) {
            // 积极氛围
            newArr1.push(item);
          } else if (item.secondType == 7) {
            // 教学活动形式
            newArr7.push(item);
          } else if (item.secondType == 6) {
            // 活动安排效率
            newArr6.push(item);
          } else if (item.secondType == 5) {
            // 行为管理
            newArr5.push(item);
          } else if (item.secondType == 10) {
            // 语言示范
            newArr10.push(item);
          } else if (item.secondType == 9) {
            // 反馈质量"
            newArr9.push(item);
          } else if (item.secondType == 8) {
            // 认知发展
            newArr8.push(item);
          }
        });
        newArr1.forEach((item, index) => {
          if (index != 0) {
            item.secondLevelName = ''
          }
        })
        newArr2.forEach((item, index) => {
          if (index != 0) {
            item.secondLevelName = ''
          }
        })
        newArr3.forEach((item, index) => {
          if (index != 0) {
            item.secondLevelName = ''
          }
        })
        newArr4.forEach((item, index) => {
          if (index != 0) {
            item.secondLevelName = ''
          }
        })
        newArr5.forEach((item, index) => {
          if (index != 0) {
            item.secondLevelName = ''
          }
        })
        newArr6.forEach((item, index) => {
          if (index != 0) {
            item.secondLevelName = ''
          }
        })
        newArr7.forEach((item, index) => {
          if (index != 0) {
            item.secondLevelName = ''
          }
        })
        newArr8.forEach((item, index) => {
          if (index != 0) {
            item.secondLevelName = ''
          }
        })
        newArr9.forEach((item, index) => {
          if (index != 0) {
            item.secondLevelName = ''
          }
        })
        newArr10.forEach((item, index) => {
          if (index != 0) {
            item.secondLevelName = ''
          }
        })
        this.bottomInfo = [...newArr1, ...newArr2, ...newArr3, ...newArr4, ...newArr5, ...newArr6, ...newArr7, ...newArr8, ...newArr9, ...newArr10,]
        console.log(this.bottomInfo, "--------------newArr");
      }
      this.dialogVisible = true;
    },
    async getList() {
      const { rows, code, msg, total } = await classRecordsList(this.queryParams);
      this.loading = true;
      if (code == 200) {
        this.loading = false;
        this.assetList = rows;
        this.total = total;
      } else {
        this.$message.error(msg);
        this.loading = false;
      }
    },
    /** 查询班级列表 */
    async getQueryClazzList() {
      try {
        this.loading = true;
        const { rows } = await selectClazz();
        this.classList = rows.map((item) => {
          return {
            id: item.id,
            label: item.title,
          };
        });
        this.loading = false;
      } catch (e) {
        console.log(e);
      }
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    handleClose() {
      this.dialogVisible = false;
    },
    /** 导出按钮操作 */
    handleExport(row) {
      let ids = "";
      if (row !== "qc") {
        ids = row;
      } else {
        ids = this.ids.join(",");
        console.log(ids);
      }
      // return
      this.$confirm("是否确认导出当前课堂评价?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return classQuestionExport(ids);
        })
        .then((response) => {
          this.download(response.data, '1');
        });
    },
  },
};
</script>

<style scoped lang="scss">
.classEvaluate {
  padding: 20px;
}

.detail-content {
  .detail-content-top-title {
    font-weight: 600;
    font-size: 20px;
    text-align: center;
  }

  .detail-content-top-name {
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
  }

  img {
    width: 100px;
    height: 100px;
  }

  .detail-content-top-content {
    p {
      display: flex;
      align-items: center;
      padding: 0;
      margin: 0;

      span {
        width: 900px;
        display: inline-block;
        height: 50px;
        border: 1px solid #ccc;
        line-height: 50px;
        text-align: center;
      }
    }

    .detail-content-top-p1 {
      width: 910px;
      height: 50px;
    }

    .detail-content-top-p2 {
      .span1 {
        width: 465px;
        height: 52px;
        border: 1px solid #ccc;
        line-height: 52px;
        text-align: center;
      }

      .p1 {
        width: 694px;
        border: 1px solid #ccc;
        display: flex;
      }

      span {
        width: 140px;
        border: 0;
      }

      display: flex;
    }

    .detail-content-top-p3 {
      .span1 {
        width: 228px;
        border: 1px solid #ccc;
        text-align: center;
        line-height: 120px;
      }
    }

    .detail-content-top-p4 {
      display: flex;

      .span1 {
        width: 230px;
        border: 1px solid #ccc;
        text-align: center;
        line-height: 200px;
      }

      .p1 {
        width: 700px;
        border: 1px solid #ccc;
        display: flex;
        flex-wrap: wrap;
        align-items: center;

        span {
          width: 200px;
          border: 0;
        }
      }
    }
  }
}

.detail-bottom {
  p {
    display: flex;
    padding: 0;
    margin: 0;
  }

  span {
    display: flex;
    width: 300px;
    border: 1px solid #000;
    height: 80px;
    align-items: center;
    justify-content: center;
  }
}

::v-deep.MsoNormal1 {
  border-left: 1px solid #000 !important;
  border-right: 1px solid #000 !important;

}

.mos {
  width: 1cm;
  // border: solid windowtext 1pt;
  mso-border-alt: solid windowtext 0.5pt;
  padding: 0cm 5.4pt 0cm 5.4pt;
  height: 18.5pt;
  // border-top: 1px solid #000 !important;
  // border-top: 1px solid #000 !important;

}
</style>
